<!--
 * @Description: 流程审批记录组件
 * @Author: DHL
 * @Date: 2022-09-14 11:09:34
 * @LastEditors: DHL
 * @LastEditTime: 2022-12-22 10:16:59
-->
<template>
  <div class="flow-record-wrapper">
    <div class="approval-record">
      <el-timeline>
        <el-timeline-item v-for="item in userTaskList" :timestamp="item.name" placement="top">
          <el-card shadow="hover">
            <div
              v-for="(userItem, index) in item.assigneeList"
              :key="userItem.id"
              :class="`user ${index > 0 ? 'mt10' : ''}`"
            >
              <div class="txt txt-1">
                <el-badge value="✔" type="primary">
                  <el-tag size="default">{{ userItem.name }}</el-tag>
                </el-badge>
              </div>
              <div class="txt txt-2">通过 · 2022-09-14 14:10:13</div>
              <div class="txt txt-3">同意</div>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { apiFlowProcessSearchUserTask } from '/@/api/flow/flowProcess'
  import { FlowUserTaskModel } from '/@/api/flow/model/flowUserTaskModel'

  interface Props {
    /**
     * 流程定义KEY
     */
    procDefKey: string

    /**
     * 业务标识
     */
    businessKey?: string

    /**
     * 流程变量
     */
    values?: any
  }

  const props = withDefaults(defineProps<Props>(), {
    procDefKey: '',
    businessKey: '',
    values: {}
  })

  //////////////////////////////////////////////////
  // 属性
  //////////////////////////////////////////////////
  const userTaskList = ref([] as Array<FlowUserTaskModel>)

  //////////////////////////////////////////////////
  // 函数
  //////////////////////////////////////////////////

  /**
   * 查询用户任务
   */
  function handleSearchUserTask() {
    apiFlowProcessSearchUserTask({
      procDefKey: props.procDefKey
    }).then((result) => {
      console.info(result)
      if (result?.success) {
        userTaskList.value = result.data
      }
    })
  }

  //////////////////////////////////////////////////
  // 生命周期
  //////////////////////////////////////////////////
  onMounted(() => {
    handleSearchUserTask()
  })

  //////////////////////////////////////////////////
  // 暴露出去，父组件才可以调用到
  //////////////////////////////////////////////////
  defineExpose({})
</script>

<style scoped lang="scss">
  .flow-record-wrapper {
    .approval-record {
      display: flex;
      justify-content: center;
      align-items: center;

      .user {
        width: 260px;
        padding: 10px;
        border: 1px dashed #cdd0d6;
        border-radius: 6px;

        &.mt10 {
          margin-top: 10px;
        }
        .txt {
          padding: 2px 0px;
          color: #909399;
        }
        .txt-1 {
          font-size: 14px;
        }
        .txt-2 {
          text-align: right;
        }

        .txt-3 {
          padding-left: 5px;
        }

        &.succsss {
          color: #409eff;
        }
      }
    }
  }
</style>
